<template>
<div>
  <div class="backroad" id="map"></div>

<div id="panel"></div>
    <router-link to="/on"><button class="btn2">返回</button></router-link>
</div>

</div>
</template>

<script>
  export default {
    name: 'Huan',
    mounted() {
     var map = new AMap.Map("map", {
        resizeEnable: true,
        center: [121.550357, 29.874556],
        zoom: 13 
    });
    var transOptions = {
        map: map,
        city: '宁波市',
        panel: 'panel',                           
        policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
    };
    //构造公交换乘类
    var transfer = new AMap.Transfer(transOptions);
    //根据起、终点名称查询公交换乘路线
    transfer.search([
        {keyword: '浙江万里学院',city:'宁波'},
        //第一个元素city缺省时取transOptions的city属性
        {keyword: '天一广场',city:'宁波'}
        //第二个元素city缺省时取transOptions的cityd属性
    ], function(status, result) {
        // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
        if (status === 'complete') {
            log.success('绘制公交路线完成')
        } else {
            log.error('公交路线数据查询失败' + result)
        }
    });
    },
    methods: {
     
    }
  }
</script>

<style scoped>

  .backroad {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
 #panel {
         /* display: flex; */
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
            z-index: 10000;
        }
        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
   	        border-top-right-radius: 4px;
        }
        #panel .amap-lib-transfer {
	        border-bottom-left-radius: 4px;
   	        border-bottom-right-radius: 4px;
            overflow: hidden;
        }
.btn2{
  position: relative;
  top: 6rem;
  height: 1.5rem;
  width: 3rem;
 right: 5rem;
}

</style>